<template>
  <div>
    <div class="gd">
      <div class="cell" @click="shouPup">
        选择城市：{{ message }} <input class="text-hui" />
      </div>
    </div>
    <div class="xian"></div>

    <div id="fenlei" @click="oilPrice">
      <span :class="{ cur: this.oilname == 92 }" data-index="oil_92">92号</span>
      <span :class="{ cur: this.oilname == 95 }" data-index="oil_95">95号</span>
      <span :class="{ cur: this.oilname == 98 }" data-index="oil_98">98号</span>
      <span :class="{ cur: this.oilname == 0 }" data-index="oil_0">0号</span>
    </div>
    <mt-popup
      closeOnClickModal="true"
      v-model="popupVisible"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%; height: 30%"
    >
      <mt-picker
        style="width: 100%"
        :show-toolbar="true"
        :visible-item-count="5"
        :slots="slots"
        @change="onValuesChange"
      >
        <div class="picker_header">
          <div class="usi-btn" @click="abolish">取消</div>
          <div class="">请选择查看的地区</div>
          <div class="usi-btn" @click="define">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <div id="main" style="width: 100vw; height: 50vh"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
// import { Menu } from "element-ui";
export default {
  computed: {
    ...mapState(["value"]),
  },
  props: ["lun"],
  data() {
    return {
      index: "oil_0", //油价编号oil_0
      oildate: [], //油的日期
      oilname: 0,
      oilprice: "**",
      value: "",
      data: "",
      oil_0: [],
      //  // 油价列表的数值
      message: "安徽",
      slots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: ["滑动寻找"],
        },
      ],
      popupVisible: false,
    };
  },

  mounted() {
    this.oilTu();
  },

  methods: {
    oilPrice(e) {
      console.log(this.valueocalloc);
      this.index = e.target.dataset.index;
      console.log(this.index);
      if (this.index == "undefined") return;
      this.oilname = this.index.split("_")[1];
      this.oilTu();
    },
    oilTu() {
      // this.sum = [];
      this.axios.get(`v1/family?pname=${this.message}`).then((res) => {
        let sum = [];
        // let oilna = index.split("_")[1];
        // console.log("汽油名字", oilna);
        console.log(res.data);
        // console.log("index的值是", index);

        // 基于准备好的dom，初始化echarts实例
        this.oildate = [];
        res.data.forEach((val) => {
          console.log("val[this.index]:", val[this.index]);
          sum.unshift(val[this.index]);
          if (this.oildate.length <= 10) {
            this.oildate.unshift(val.updatetime);
          }
        });
        console.log("日期", this.oildate);

        console.log("油价数组", sum);
        var myChart = echarts.init(document.getElementById("main"));
        // 绘制图表
        myChart.setOption({
          title: {
            text:
              "今日" +
              this.oilname +
              "号汽油：" +
              sum[sum.length - 1] +
              "（元/升）",
          },
          tooltip: {
            trigger: "axis",
          }, //工具提示（）鼠标选中图时的提示
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },

          xAxis: {
            type: "category",
            data: this.oildate,
            // nameTextStyle: {
            //     fontSize: 12,
            // },
            axisLabel: { rotate: 90 },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: sum,
              type: "line",
              step: "end",
              color: "#db261d",
            },
          ],
        });
      });
    },

    getAdd() {
      let url = "v1/area";
      this.axios.get(url).then((res) => {
        // console.log(res.data);
        for (var index in res.data) {
          let item = res.data[index];
          // console.log(item.pid-1)
          this.slots[0].values[item.pid - 1] = item.pname;
          // console.log(this.slots[0].values)
        }
      });
    },

    // 点击“选择城市”，获取并显示城市列表弹框
    shouPup() {
      // 请求地址，获取所有地址列表
      this.getAdd();
      this.popupVisible = true;
    },

    // 地址发生改变时触发，获取改变后的地址
    onValuesChange(picker, values) {
      console.log("values:", values[0]);
      this.value = values[0];
      //$emit:触发事件，相当于：参数1(参数2)，即aabb(name)
      this.$emit("ab", this.value);
    },

    // 点击取消时
    abolish() {
      this.popupVisible = false;
    },

    // 点击确认时
    define() {
      this.oilname = 0;
      this.index = "oil_0";
      this.message = this.value;
      this.popupVisible = false;
      this.oilTu();
    },
  },
};
</script>
<style scoped>
.gd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}
.xian {
  border-bottom: 2px solid #db261d;
  margin-bottom: 2vh;
}
.cell {
  display: inline-block;
  margin-left: 1vw;
}
.cell > .text-hui {
  width: 70px;
  text-align: right;
  border: none;
  caret-color: transparent;
  font-size: 1.4em;
}

.picker-toolbar {
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  font-size: 16px;
}
.picker_header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.usi-btn {
  color: #ff6600;
}
#main {
  display: block;
  width: 100vw;
  height: 60vh;
  /* border: 1px solid gray; */
}
#fenlei {
  margin-bottom: 3vh;
  display: flex;
  justify-content: space-around;
}
#fenlei span {
  border: 1px solid gray;
  padding: 8px 18px;
  border-radius: 5px;
}
.cur {
  background-color: #db261d;
  color: #fff;
}
</style>
